<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>es6 super的其他用法</title>
  <!-- 
  在 JavaScript ES6 中， `super`  关键字主要用于类的继承，允许子类访问父类的属性和方法。除了在构造函数中调用父类的构造函数外， `super`  还有其他一些用法。
  1. 调用父类构造函数
  这是  `super`  最常见的用法。在子类的构造函数中，使用  `super()`  来调用父类的构造函数，以初始化父类的属性。

   示例代码：
  class Animal {
      constructor(name) {
          this.name = name;
      }
  }

  class Dog extends Animal {
      constructor(name, breed) {
          super(name); // 调用父类构造函数
          this.breed = breed;
      }
  }

  const dog = new Dog('Rex', 'Golden Retriever');
  console.log(dog.name); // 输出: Rex
  console.log(dog.breed); // 输出: Golden Retriever
  2. 调用父类的方法
  在子类中，可以使用  `super.methodName()`  来调用父类的方法。这在重写父类方法时特别有用，可以在子类中扩展父类的方法。
  class Animal {
      speak() {
          console.log('Animal makes a noise');
      }
  }

  class Dog extends Animal {
      speak() {
          super.speak(); // 调用父类的方法
          console.log('Dog barks');
      }
  }

  const dog = new Dog();
  dog.speak();
  // 输出:
  // Animal makes a noise
  // Dog barks
  3. 在 getter 和 setter 中使用  `super` 
  在定义访问器属性（getter 和 setter）时，可以使用  `super`  来调用父类的访问器属性。

   示例代码：
  class Animal {
      get sound() {
          return 'generic sound';
      }
  }

  class Dog extends Animal {
      get sound() {
          return super.sound + ' and bark'; // 调用父类的 getter
      }
  }

  const dog = new Dog();
  console.log(dog.sound); // 输出: generic sound and bark
  4. 结合静态方法使用  `super` 
  在子类中，可以使用  `super.methodName()`  来调用父类的静态方法。

   示例代码：
  class Animal {
      static info() {
          return 'Animals are living beings.';
      }
  }

  class Dog extends Animal {
      static info() {
          return super.info() + ' Dogs are domesticated animals.'; // 调用父类的静态方法
      }
  }

  console.log(Dog.info()); // 输出: Animals are living beings. Dogs are domesticated animals.
  5. 总结
  在 ES6 中， `super`  关键字不仅可以用来调用父类的构造函数，还可以用于调用父类的方法、访问器属性和静态方法。通过使用  `super` ，子类可以更方便地扩展和重用父类的功能，从而实现更灵活的面向对象编程。理解  `super`  的多种用法对于深入掌握 JavaScript 的类和继承机制非常重要。
   -->
</head>
<body>

  <script>
     class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }
      say() {
        console.log(`我叫${this.name},我今年${this.age}岁`);
      }
      static run() {
        console.log('我会跑');
      }
    }
    
    class Student extends Person {
      constructor(name, age, score) {
        // 1. super(name, age); // 调用父类的构造函数
        super(name, age);
        this.score = score;
      }
      say() {
        // 2. super.say(); // 调用父类的say方法
        super.say();
        console.log(`我的成绩是${this.score}`);
      }
      static info() {
        super.run(); // 调用父类的静态方法
        console.log(`我是静态方法`);
      }
    }

    const student = new Student('张三', 18, 90);
    student.say(); // 输出: 我叫张三,我今年18岁 我的成绩是90
    Student.info(); // 输出: 我会跑 我是静态方法
    
  </script>
  
</body>
</html>